<template>
  <md-page title="关于我们">
    <view class="about_contanier">
      <view class="about_top">
        <image class="about_bg" :src="data.info?.about_us_bgimg" mode="aspectFill" />
        <view class="about_content">
          <view class="top_item">
            <view class="top_title">客服热线</view>
            <view class="top_label">{{ data.info?.kefu_mobile }}</view>
          </view>
          <view class="top_item">
            <view class="top_title">E-mail</view>
            <view class="top_label">{{ data.info?.kefu_email }}</view>
          </view>
          <view class="top_item">
            <view class="top_title">客服服务时间</view>
            <view class="top_label">{{ data.info?.kefu_worktime }}</view>
          </view>
          <view class="top_item">
            <view class="top_title">客服微信号</view>
            <view class="top_label">{{ data.info?.kefu_weixin }}</view>
          </view>
          <view class="top_item">
            <view class="top_title">扫码关注我们</view>
            <view class="top_label top_attention">
              <view class="a_wechat" @click="kf_ercode">
                <image src="@/static/images/wechat.png"></image>
                <text>客服微信</text>
              </view>
              <view class="a_gzh" @click="gzh_ercode">
                <image src="@/static/images/gzh.png"></image>
                <text>关注公众号</text>
              </view>
            </view>
          </view>
        </view>
      </view>
      <!-- 关于我们 -->
      <view class="about_bottom">
        <!-- <view class="about_us">
          <view class="about_title">关于我们</view>
        </view> -->
        <view>
          <rich-text :nodes="data.info?.about_us"></rich-text>
        </view>
      </view>
    </view>
  </md-page>
</template>

<script setup lang="ts">
import { aboutUs } from '@/api';
import { onLoad } from '@dcloudio/uni-app';
import { reactive } from 'vue';
const data = reactive<any>({
  info: {},
});

// 显示客户二维码
function kf_ercode() {
  uni.previewImage({
    current: data.info?.kefu_qrcode,
    urls: [data.info?.kefu_qrcode],
  });
}

// 显示公众号二维码
function gzh_ercode() {
  uni.previewImage({
    current: data.info.gzh_qrcode,
    urls: [data.info.gzh_qrcode],
  });
}

/**
 * 接口相关
 */
const fetchAboutUs = async () => {
  try {
    const res = await aboutUs();
    data.info = res.data;
  } catch (error) {}
};

onLoad(() => {
  fetchAboutUs();
});
</script>

<style lang="scss" scoped>
.about_top {
  width: 100%;
  height: 840rpx;
  position: relative;
}

.about_bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.about_content {
  width: 100%;
  height: 100%;
  padding: 50rpx;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  box-sizing: border-box;
}

.top_title {
  font-size: 24rpx;
  color: white;
  text-indent: 19rpx;
  margin: 10rpx 0;
}

.top_label {
  width: 650rpx;
  height: 80rpx;
  display: flex;
  align-items: center;
  background: rgba(0, 0, 0, 0.2);
  color: white;
  font-size: 30rpx;
  border-radius: 20rpx;
  padding: 0 23rpx;
  box-sizing: border-box;
}

.top_attention {
  height: 150rpx;
  text-align: center;
}

.top_attention > view {
  flex: 1;
}

.top_attention image {
  display: block;
  margin: 0 auto 15rpx;
  width: 48rpx;
  height: 48rpx;
}

.about_bottom > view {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 750rpx;
  background: white;
  box-sizing: border-box;
}

/* 关于我们 */

.about_us_img {
  height: 450rpx;
  width: 690rpx;
  border-radius: 20rpx;
}

/* 品牌介绍 */

.brand_main {
  text-align: center;
  color: rgb(117, 117, 117);
  font-size: 24rpx;
  line-height: 42rpx;
}

/* 主办单位 */

.about_bottom .about_sponsor {
  padding-bottom: 35rpx;
}

.sponsor_title {
  margin-top: 18rpx;
  margin-bottom: 25rpx;
  color: rgb(253, 123, 63);
  font-size: 30rpx;
}

.about_logo {
  height: 149rpx;
  width: 461rpx;
}
</style>
